<!doctype html>

<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

  <title>Basis Demos: Selection as data source</title>

  <link rel="stylesheet" type="text/css" title="Compat Style" href="../../style/tree/compat/style.css" media="screen" />

  <style id="demo-css" type="text/css">
    #sourceTree,
    #selectedItemsTree,
    #selectedItemsByGroupTree
    {
      float: left;
    }
    #sourceTree H2,
    #selectedItemsTree H2,
    #selectedItemsByGroupTree H2
    {
      font-size: 100%;
    }
    .Basis-Tree
    {
      border: 1px solid #888;
      width: 300px;
      height: 400px;
      margin-right: 1ex;
      overflow: auto;
    }
  </style>

  <script type="text/javascript" src="../../basis-all.js"></script>

  <script type="text/javascript" src="../demo.js"></script>
</head>

<body>
  <h1>Basic demos: Selection as data source</h1>
  
  <p id="demo-summary">
    ..
  </p>
  <div id="demo-description">
    ..
  </div>

  <div id="demo-container">
    <div id="demo-panel">
      <button id="button-SelectAll">Select all</button>
      <button id="button-SelectChildNodes">Select first level child nodes</button>
      <button id="button-ClearSelection">Clear selection</button>
      <p>Use CTRL key for multiple select.</p>
    </div>
    <div id="sourceTree">
      <h2>Source tree</h2>
    </div>
    <div id="selectedItemsTree">
      <h2>Selected items</h2>
    </div>
    <div id="selectedItemsByGroupTree">
      <h2>Selected items by groups</h2>
    </div>
  </div>

  <script id="demo-javascript" type="text/javascript">
    var DOM = basis.dom;
    var Event = basis.dom.event;
    var nsTree = basis.ui.tree;

    //
    // Master tree
    //
    var tree1 = new nsTree.Tree({
      container: DOM.get('sourceTree'),
      selection: { multiple: true },
      childNodes: Array.create(10, function(i){
        return new nsTree.Folder({
          data: {
            id: i,
            title: 'item #' + i
          },
          childNodes: [
            new nsTree.Node({
              data: {
                title: 'child of item #' + i
              }
            })
          ]
        })
      })
    });

    //
    // Related tree shows tree1 selected items
    //
    var tree2 = new nsTree.Tree({
      container: DOM.get('selectedItemsTree'),
      dataSource: tree1.selection
    });

    //
    // Related tree shows tree1 selected item groups. Each group also can
    // be expanded and shows it's content.
    //
    var tree3 = new nsTree.Tree({
      container: DOM.get('selectedItemsByGroupTree'),
      dataSource: new basis.data.dataset.Split({
        source: tree1.selection, 
        rule: Function.getter('data.id % 2', {
          'NaN': 'Child items',
          '0': 'Even items',
          '1': 'Odd items'
        })
      }),
      childClass: nsTree.Folder.subclass({
        collapsed: true,
        event_expand: function(){
          nsTree.Folder.prototype.event_expand.call(this);
          this.setDataSource(this.delegate);
        },
        init: function(config){
          nsTree.Folder.prototype.init.call(this, config);

          this.tmpl.itemCountText = DOM.insert(this.tmpl.title, '');
          this.listen.delegate.datasetChanged.call(this, this.delegate);
        },
        listen: {
          delegate: {
            datasetChanged: function(dataset, delta){
              this.tmpl.itemCountText.nodeValue = ' ({0})'.format(dataset.itemCount);
            }
          }
        }
      })
    });

    //
    // Add click event handlers on buttons
    //

    Event.addHandler('button-SelectAll', 'click', function(){
      tree1.selection.set(DOM.axis(tree1, DOM.AXIS_DESCENDANT));
    });

    Event.addHandler('button-SelectChildNodes', 'click', function(){
      tree1.selection.set(tree1.childNodes);
    });

    Event.addHandler('button-ClearSelection', 'click', function(){
      tree1.selection.clear();
    });

  </script>
</body>

</html>